<template>
  <div class="store-board">
    <h1 style="font-size: 23px;">退款退货申请</h1>
    <!-- 分割线 -->
    <el-divider></el-divider>
    <el-table v-loading="loading" :data="revokeRequestList" style="width: 100%">
      <el-table-column prop="returnGoodsRequestId" label="退款申请ID" width="180"></el-table-column>
      <el-table-column prop="orderId" label="订单ID" width="180"></el-table-column>
      <!-- 退款状态 -->
      <el-table-column prop="status" label="退款状态" align="center" width="100"
        :filters="[{ text: '已通过', value: 1 }, { text: '申请中', value: 0 }, { text: '不通过', value: 2 }]">
        <template v-slot="scope">
          <el-tag size="small" v-if="scope.row.status === 1" type="success">已通过</el-tag>
          <el-tag size="small" v-else-if="scope.row.status === 0" type="warning">申请中</el-tag>
          <el-tag size="small" v-else type="danger">不通过</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="initiateTime" label="发起时间" width="180"></el-table-column>
      <el-table-column prop="processTime" label="处理时间" width="180"></el-table-column>
      <el-table-column label="操作" align="center" fixed="right">
        <template v-slot="scope">
          <el-button type="primary" size="small" @click="getRevokeRequestDetail(scope.$index)">
            详情
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination background layout="prev, pager, next" :total="config.total" class="pager mt-4"
      @current-change="changePage" :page-size="config.size" />
  </div>

  <!-- 查看申请信息的模态框 -->
  <el-dialog v-model="dialogVisible" title="开店申请详情" width="50%">

    <!-- 申请信息展示表格 -->
    <el-descriptions :column="1" size="default" border>
      <el-descriptions-item label="退款申请ID" label-align="center" align="center">
        {{ revokeRequestDetail.revokeRequest.returnGoodsRequestId }}
      </el-descriptions-item>
      <el-descriptions-item label="商店ID" label-align="center" align="center">
        {{ revokeRequestDetail.revokeRequest.storeId }}
      </el-descriptions-item>
      <el-descriptions-item label="订单ID" label-align="center" align="center">
        {{ revokeRequestDetail.revokeRequest.orderId }}
      </el-descriptions-item>
      <el-descriptions-item label="申请发起时间" label-align="center" align="center">
        {{ revokeRequestDetail.revokeRequest.initiateTime }}
      </el-descriptions-item>
      <el-descriptions-item label="申请审核时间" label-align="center" align="center">
        {{ revokeRequestDetail.revokeRequest.processTime }}
      </el-descriptions-item>
      <el-descriptions-item label="退货退款原因" label-align="center" align="center">
        <el-input type="textarea" v-model="revokeRequestDetail.revokeRequest.returnReason" readonly></el-input>
      </el-descriptions-item>
      <el-descriptions-item label="退款状态" label-align="center" align="center">
        <el-tag size="large" v-if="revokeRequestDetail.revokeRequest.status === 1" type="success">已通过</el-tag>
        <el-tag size="large" v-else-if="revokeRequestDetail.revokeRequest.status === 0" type="warning">申请中
        </el-tag>
        <el-tag size="large" v-else type="danger">不通过</el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="审核意见" label-align="center" align="center">
        {{ revokeRequestDetail.revokeRequest.info }}
      </el-descriptions-item>
    </el-descriptions>

    <!-- 底部的按钮 -->
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">
          取消
        </el-button>
        <el-button type="primary" @click="dialogVisible = false">
          确认
        </el-button>
      </span>
    </template>

  </el-dialog>
</template>

<script setup>
import { onMounted, reactive, ref, getCurrentInstance } from 'vue'
import { useStore } from 'vuex'
import { useRouter } from 'vue-router';

const store = useStore();
const { proxy } = getCurrentInstance();
const router = useRouter()
const revokeRequestList = ref([]);
const loading = ref(false);
// 控制模态框的显示和隐藏
const dialogVisible = ref(false);

// 分页配置信息
const config = reactive({
  total: 0,  // 总的条目数
  current: 1,  // 当前页
  size: 15  // 一页的条目数
})

// 控制分页
const changePage = (page) => {
  // 更新当前页码
  config.current = page
  getMyRevokeRequest(store.state.user.userId);
}

// 开店申请表单信息
const revokeRequestDetail = reactive({
  // 再定义一层属性名，避免赋值失败
  revokeRequest: {
    "returnGoodsRequestId": "",
    "initiateTime": "",
    "processTime": "",
    "storeId": "",
    "orderId": "",
    "userId": "",
    "status": 0,
    "info": "",
    "returnReason": ""
  }
});

/**
 * 获取个人的所有退货退款申请
 * @param {string} userId 用户ID
 */
const getMyRevokeRequest = async (userId) => {
  loading.value = true;
  let res = await proxy.$api.order.getReturnOrderRequestOfUser(userId, {
    current: config.current,
    size: config.size,
  });
  revokeRequestList.value = res.data.returnGoodsRequestList;
  config.total = res.data.total;
  loading.value = false;
}

// 当前查看详情对应索引号
const currentIndex = ref(0);

// 直接从revokeRequestList中根据index获取
const getRevokeRequestDetail = async (index) => {
  // 更新详情对应索引
  currentIndex.value = index;
  revokeRequestDetail.revokeRequest = revokeRequestList.value[index];
  dialogVisible.value = true;
};

onMounted(async () => {
  await getMyRevokeRequest(store.state.user.userId);
})
</script>

<style lang="less" scoped>
.store-board {
  background: linear-gradient(180deg, #ecf0f5ee 0%, #ffffffea 100%);
  padding: 30px;
  border-radius: 10px;

  /* 分割线 */

  .el-divider {
    border-top: 2px solid rgba(170, 165, 165, 0.651);
  }

  .pager {
    position: relative;
    bottom: -15px;
    justify-content: flex-end;
    margin-right: 15px;
    margin-top: 10px;
    margin-bottom: 15px;
  }

}
</style>